<template>
  <!-- 人员信息模块 -->
  <view class="container">
    <view v-if="!hideHeader" class="header disFlxJS px-16 py-13">
      <text class="fz-16 default-color font-bold">{{ title }}</text>
      <view
        v-if="phoneNumber || customPhone"
        class="contact w-32 h-32 disFlxCC"
        @click="makePhoneCall"
      >
        <text class="ali-icon fz-16">&#xe6cb;</text>
      </view>
    </view>
    <view class="pa-16 disFlx">
      <TImage
        class="flex-shrink-0"
        :src="avatar"
        width="144rpx"
        height="144rpx"
        border-radius="8rpx"
        error-img-type="person"
      />
      <view class="ml-12 flex-1 item-right">
        <view class="disFlx">
          <text class="fz-16 default-color font-bold">{{ userName }}</text>
          <text v-if="memberLevelName" class="ml-4 jobtitle-tag px-6 py-2 fz-12 br-2">
            {{ memberLevelName }}
          </text>
        </view>
        <view class="disFlxAC fz-12 default-color font-bold">
          <text class="flex-shrink-0">{{ companyPosition }}</text>
          <text v-if="companyPosition && companyName" class="mx-8">|</text>
          <text class="flex-1 ov-1">{{ companyName }}</text>
        </view>
        <text v-if="orgName" class="fz-12" style="color: #999996">来源组织：{{ orgName }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import TImage from '@/components/TImage/index.vue';

  const props = defineProps({
    title: propTypes.string.def('发布人信息'),
    /** 发布人头像 */
    avatar: propTypes.string,
    /** 发布人公司名称 */
    companyName: propTypes.string,
    /** 发布人职务 */
    companyPosition: propTypes.string,
    /** 发布人名称 */
    userName: propTypes.string,
    /** 发布人单位等级 */
    memberLevelName: propTypes.string,
    /** 来源机构 */
    orgName: propTypes.string,
    phoneNumber: propTypes.string,
    /** 是否自定义拨打 */
    customPhone: propTypes.bool.def(false),
    hideHeader: propTypes.bool.def(false),
  });

  const emits = defineEmits(['customMakePhoneCall']);

  function makePhoneCall() {
    if (props.customPhone) {
      emits('customMakePhoneCall')
    } else {
      uni.makePhoneCall({
        phoneNumber: props.phoneNumber,
      });
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
    .header {
      border-bottom: 1px solid #ebedf0;
      .contact {
        background-color: #d0f7ff;
        color: #2878ff;
        border-radius: 50%;
      }
    }

    .item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .jobtitle-tag {
        color: #ea5e0e;
        background-image: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
      }
    }
  }
</style>
